<template>
  <div class="q-head">
    <Logo></Logo>
    <n-space justify="end" align="center">
      <create-new-q></create-new-q>
      <n-button
        :bordered="false"
        @click="goToQList"
        round
        color="#3c87c5"
        text-color="#fff"
      >
        <template #icon>
          <n-icon>
            <list />
          </n-icon>
        </template>
        我的列表
      </n-button>
      <LoginState></LoginState>
    </n-space>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { Add, List } from '@vicons/ionicons5';
import LoginState from '@components/LoginState.vue';
import CreateNewQ from '@components/CreateNewQ.vue';
import Logo from '@components/Logo.vue';
import { useRouter } from 'vue-router';

// 菜单点击
const handleUpdateMenu = () => {};
const router = useRouter();

const goToQList = () => {
  router.push('/q/list');
};
</script>

<style scoped lang="scss">
.q-head {
  height: 13vh;
  line-height: 12vh;
  background: url('@images/login-bg.png') no-repeat;
  background-position: 45% 15%; /*这个是按从左往右，从上往下的百分比位置进行调整*/
  padding: 0 0.5vw;
}
.card {
  cursor: pointer;
}
</style>
